<template>
    <div class="api-warp item-warp">
        <div class="item-title">
            <h2>API服务统计</h2>
            <a class="btn">
                <img src="../../assets/img/icon/icon_arrow.png">
            </a>
        </div>
        <div class="api-content">
            <div class="cont-item">
                <p class="cont-text">
                    应用个数<br><span>{{appTotal}}</span>
                </p>
                <div class="api-line">
                    <echarts-line :data="lineData" v-if="lineData.lineY.length>0"></echarts-line>
                </div>
            </div>
            <div class="cont-item">
                <p class="cont-text">
                    API服务总次数<br><span>{{apiTotal}}</span>
                </p>
                <div class="api-radar">
                    <echarts-radar :data="radarData" :maxData="maxData"></echarts-radar>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import EchartsLine from '@/components/Echarts/EchartsLine/apiCount';
    import EchartsRadar from '@/components/Echarts/EchartsRadar/radar';
    import {getApiData} from "@/api/apiList";

    export default {
        name: "apiCount",
        components: {EchartsLine, EchartsRadar},
        data: () => ({
            lineData: { // 折线图，
                lineX: [],
                lineY: [],
                position: [30, 40, 20, 50],
                title: 'API服务次数'
            },
            maxData: [  //雷达图最大值
                {name: '产品模型', max: 0},
                {name: '设备管理', max: 0},
                {name: '执行命令', max: 0},
                {name: '存储', max: 0},
            ],
            //雷达图数值
            radarData: [],
            appTotal: '',
            apiTotal: '',
            max: 0,
        }),
        methods: {
            /**
             * API服务统计数据
             */
            getApiData() {
                getApiData({}).then(res => {
                    res = res.data;
                    console.log('API服务统计数据', res);
                    this.appTotal = res.appTotal;
                    this.apiTotal = res.apiCallTimesTotal.apiCallTimesTotal;
                    res.apiCallTimesDaily.map(item => {
                      let statTime = item.statTime;
                      let index = statTime.indexOf("-")
                      statTime = statTime.substring(index + 1, statTime.length);
                        this.lineData.lineX.push(statTime);
                        this.lineData.lineY.push(item.num);
                    });

                    /**
                     *
                     * 这里是雷达图相关的接口数据
                     * */
                    this.max = Number(res.apiCallTimesTotal.apiCallTimesCommand) + Number(res.apiCallTimesTotal.apiCallTimesDevice) + Number(res.apiCallTimesTotal.apiCallTimesProduct) + Number(res.apiCallTimesTotal.apiCallTimesStorage);
                    let maxApi = this.maxData
                    maxApi.forEach(item => {
                      item.max = this.max
                    })
                    this.maxData = maxApi;
                    this.radarData[0] = Number(res.apiCallTimesTotal.apiCallTimesProduct)
                    this.radarData[1] = Number(res.apiCallTimesTotal.apiCallTimesDevice)
                    this.radarData[2] = Number(res.apiCallTimesTotal.apiCallTimesCommand)
                    this.radarData[3] = Number(res.apiCallTimesTotal.apiCallTimesStorage)
                });
            },
        },
        created() {
            this.getApiData()
        }
    }
</script>

<style scoped type="text/less" lang="less">
    .api-warp {
        flex: 1;
        height: 27vh;
        background-image: url("../../assets/img/bg/bg_k02.png");
        background-size: 100% 100%;
        .api-content {
            display: flex;
            margin-top: 5px;
            width: 100%;
            .cont-item {
                position: relative;
                width: 50%;
                height: 25vh;
                .cont-text {
                    text-align: center;
                    color: @wordColor1;
                    line-height: 30px;
                    font-size: 16px;
                    span {
                        font-size: 24px;
                    }
                }
                &:last-child {
                    margin-left: auto;

                }
                .api-line {
                    position: absolute;
                    bottom: 20px;
                    left: 0;
                    margin: 0 auto;
                    width: 190px;
                    height: 180px;
                }
                .api-radar {
                    position: absolute;
                    top: 50px;
                    right: 0;
                    width: 200px;
                    height: 200px;
                    z-index: 111;
                }
            }
        }
    }
</style>
